<template>
  <div class="brokerbox">
    <div class="broker mg-20">
      <div class="flex">
        <div class="flex-1"><img src="../../assets/img/brokedis.svg" alt=""></div>
        <div class="flex-c-fs-between pdt-30 flex-1">
          <div class="fontW-7 font-25 theme-color">{{$t('brokerDisplay.text')}}</div>
          <div>
            <div class="font-20 fontW-7 color-f">{{$t('brokerDisplay.msg')}}</div>
            <div class="mgt-50"><el-button class="color-0 bg-yellow  font-25 fontW-7 boxS-i-4" style="width:85%;border:0;">{{$t('brokerDisplay.btnmsg')}}</el-button></div>
          </div>
        </div>
      </div>
      <div class="brokercenter mgt-100">
        <div class="brokercenitem flex-n-center mgb-20">
            <div class="fontW-7 font-25 mglr-50 theme-color" @click="hundleActive(0)" :class="active === 0 ? 'theme-color' : 'color-f'">{{$t('brokerDisplay.whole')}}</div>
            <div class="fontW-7 font-25 mglr-50 itemlist_hover"  @click="hundleActive(1)" :class="active===1? 'theme-color':'color-f'">
              {{$t('brokerDisplay.openNum')}}
              <img :src="active === 1 ? activeFlag : activeImg" alt="">
            </div>
            <div class="fontW-7 font-25 mglr-50 itemlist_hover"  @click="hundleActive(2)" :class="active===2? 'theme-color':'color-f'">
              {{$t('brokerDisplay.success_rete')}}
              <img :src="active === 2 ? activeFlag : activeImg" alt="">
            </div>
            <div class="fontW-7 font-25 mglr-50 itemlist_hover"  @click="hundleActive(3)" :class="active===3? 'theme-color':'color-f'">
              {{$t('brokerDisplay.trading_volume')}}
              <img :src="active === 3 ? activeFlag : activeImg" alt="">
            </div>
        </div>
        <div class="flex-w-start brokerItem" style="height:80vh" v-if="active===1">
          <div v-for="item in brokerData" :key="item.id" style="width: 23%;margin:1%">
          <broker-item :data="item"/>
        </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import BrokerItem from '../../components/component/BrokerItem'
const brokerData = [
  {
    id: 0,
    brokerInfo: {
      name: 'Adidas boy',
      head_url: require('../../assets/img/img_cate197@1x.png')
    },
    openGrop: '118',
    joingrop: '99',
    success_rate: 83,
    Trading_volume: 298,
    social_way: [
      {id: 0, img_url: require('../../assets/chat/bank.svg')},
      {id: 1, img_url: require('../../assets/chat/twitter.svg')},
      {id: 2, img_url: require('../../assets/chat/facebook.svg')},
      {id: 3, img_url: require('../../assets/chat/youtube.svg')},
      {id: 4, img_url: require('../../assets/chat/github.svg')},
      {id: 5, img_url: require('../../assets/chat/reddit.svg')},
      {id: 6, img_url: require('../../assets/chat/wechat.svg')},
      {id: 7, img_url: require('../../assets/chat/discord.svg')},
      {id: 8, img_url: require('../../assets/chat/instagram.svg')}
    ],
    isopen: true,
    gropData: [
      {id: 0, grop_url: require('../../assets/img/img_a84@1x.png')},
      {id: 1, grop_url: require('../../assets/img/img_b85@1x.png')},
      {id: 2, grop_url: require('../../assets/img/img_c86@1x.png')},
      {id: 3, grop_url: require('../../assets/img/img_d87@1x.png')}
    ]
  },
  {
    id: 1,
    brokerInfo: {
      name: 'Adidas boy',
      head_url: require('../../assets/img/img_cate197@1x.png')
    },
    openGrop: '118',
    joingrop: '99',
    success_rate: 83,
    Trading_volume: 298,
    social_way: [
      {id: 0, img_url: require('../../assets/chat/bank.svg')},
      {id: 1, img_url: require('../../assets/chat/twitter.svg')},
      {id: 2, img_url: require('../../assets/chat/facebook.svg')},
      {id: 3, img_url: require('../../assets/chat/youtube.svg')},
      {id: 4, img_url: require('../../assets/chat/github.svg')},
      {id: 5, img_url: require('../../assets/chat/reddit.svg')},
      {id: 6, img_url: require('../../assets/chat/wechat.svg')},
      {id: 7, img_url: require('../../assets/chat/discord.svg')},
      {id: 8, img_url: require('../../assets/chat/instagram.svg')}
    ],
    isopen: true,
    gropData: [
      {id: 0, grop_url: require('../../assets/img/img_a84@1x.png')},
      {id: 1, grop_url: require('../../assets/img/img_b85@1x.png')},
      {id: 2, grop_url: require('../../assets/img/img_c86@1x.png')},
      {id: 3, grop_url: require('../../assets/img/img_d87@1x.png')}
    ]
  },
  {
    id: 2,
    brokerInfo: {
      name: 'Adidas boy',
      head_url: require('../../assets/img/img_cate197@1x.png')
    },
    openGrop: '118',
    joingrop: '99',
    success_rate: 83,
    Trading_volume: 298,
    social_way: [
      {id: 0, img_url: require('../../assets/chat/bank.svg')},
      {id: 1, img_url: require('../../assets/chat/twitter.svg')},
      {id: 2, img_url: require('../../assets/chat/facebook.svg')},
      {id: 3, img_url: require('../../assets/chat/youtube.svg')},
      {id: 4, img_url: require('../../assets/chat/github.svg')},
      {id: 5, img_url: require('../../assets/chat/reddit.svg')},
      {id: 6, img_url: require('../../assets/chat/wechat.svg')},
      {id: 7, img_url: require('../../assets/chat/discord.svg')},
      {id: 8, img_url: require('../../assets/chat/instagram.svg')}
    ],
    isopen: true,
    gropData: [
      {id: 0, grop_url: require('../../assets/img/img_a84@1x.png')},
      {id: 1, grop_url: require('../../assets/img/img_b85@1x.png')},
      {id: 2, grop_url: require('../../assets/img/img_c86@1x.png')},
      {id: 3, grop_url: require('../../assets/img/img_d87@1x.png')}
    ]
  },
  {
    id: 3,
    brokerInfo: {
      name: 'Adidas boy',
      head_url: require('../../assets/img/img_cate197@1x.png')
    },
    openGrop: '118',
    joingrop: '99',
    success_rate: 83,
    Trading_volume: 298,
    social_way: [
      {id: 0, img_url: require('../../assets/chat/bank.svg')},
      {id: 1, img_url: require('../../assets/chat/twitter.svg')},
      {id: 2, img_url: require('../../assets/chat/facebook.svg')},
      {id: 3, img_url: require('../../assets/chat/youtube.svg')},
      {id: 4, img_url: require('../../assets/chat/github.svg')},
      {id: 5, img_url: require('../../assets/chat/reddit.svg')},
      {id: 6, img_url: require('../../assets/chat/wechat.svg')},
      {id: 7, img_url: require('../../assets/chat/discord.svg')},
      {id: 8, img_url: require('../../assets/chat/instagram.svg')}
    ],
    isopen: true,
    gropData: [
      {id: 0, grop_url: require('../../assets/img/img_a84@1x.png')},
      {id: 1, grop_url: require('../../assets/img/img_b85@1x.png')},
      {id: 2, grop_url: require('../../assets/img/img_c86@1x.png')},
      {id: 3, grop_url: require('../../assets/img/img_d87@1x.png')}
    ]
  },
  {
    id: 4,
    brokerInfo: {
      name: 'Adidas boy',
      head_url: require('../../assets/img/img_cate197@1x.png')
    },
    openGrop: '118',
    joingrop: '99',
    success_rate: 83,
    Trading_volume: 298,
    social_way: [
      {id: 0, img_url: require('../../assets/chat/bank.svg')},
      {id: 1, img_url: require('../../assets/chat/twitter.svg')},
      {id: 2, img_url: require('../../assets/chat/facebook.svg')},
      {id: 3, img_url: require('../../assets/chat/youtube.svg')},
      {id: 4, img_url: require('../../assets/chat/github.svg')},
      {id: 5, img_url: require('../../assets/chat/reddit.svg')},
      {id: 6, img_url: require('../../assets/chat/wechat.svg')},
      {id: 7, img_url: require('../../assets/chat/discord.svg')},
      {id: 8, img_url: require('../../assets/chat/instagram.svg')}
    ],
    isopen: true,
    gropData: [
      {id: 0, grop_url: require('../../assets/img/img_a84@1x.png')},
      {id: 1, grop_url: require('../../assets/img/img_b85@1x.png')},
      {id: 2, grop_url: require('../../assets/img/img_c86@1x.png')},
      {id: 3, grop_url: require('../../assets/img/img_d87@1x.png')}
    ]
  },
  {
    id: 5,
    brokerInfo: {
      name: 'Adidas boy',
      head_url: require('../../assets/img/img_cate197@1x.png')
    },
    openGrop: '118',
    joingrop: '99',
    success_rate: 83,
    Trading_volume: 298,
    social_way: [
      {id: 0, img_url: require('../../assets/chat/bank.svg')},
      {id: 1, img_url: require('../../assets/chat/twitter.svg')},
      {id: 2, img_url: require('../../assets/chat/facebook.svg')},
      {id: 3, img_url: require('../../assets/chat/youtube.svg')},
      {id: 4, img_url: require('../../assets/chat/github.svg')},
      {id: 5, img_url: require('../../assets/chat/reddit.svg')},
      {id: 6, img_url: require('../../assets/chat/wechat.svg')},
      {id: 7, img_url: require('../../assets/chat/discord.svg')},
      {id: 8, img_url: require('../../assets/chat/instagram.svg')}
    ],
    isopen: true,
    gropData: [
      {id: 0, grop_url: require('../../assets/img/img_a84@1x.png')},
      {id: 1, grop_url: require('../../assets/img/img_b85@1x.png')},
      {id: 2, grop_url: require('../../assets/img/img_c86@1x.png')},
      {id: 3, grop_url: require('../../assets/img/img_d87@1x.png')}
    ]
  },
  {
    id: 6,
    brokerInfo: {
      name: 'Adidas boy',
      head_url: require('../../assets/img/img_cate197@1x.png')
    },
    openGrop: '118',
    joingrop: '99',
    success_rate: 83,
    Trading_volume: 298,
    social_way: [
      {id: 0, img_url: require('../../assets/chat/bank.svg')},
      {id: 1, img_url: require('../../assets/chat/twitter.svg')},
      {id: 2, img_url: require('../../assets/chat/facebook.svg')},
      {id: 3, img_url: require('../../assets/chat/youtube.svg')},
      {id: 4, img_url: require('../../assets/chat/github.svg')},
      {id: 5, img_url: require('../../assets/chat/reddit.svg')},
      {id: 6, img_url: require('../../assets/chat/wechat.svg')},
      {id: 7, img_url: require('../../assets/chat/discord.svg')},
      {id: 8, img_url: require('../../assets/chat/instagram.svg')}
    ],
    isopen: true,
    gropData: [
      {id: 0, grop_url: require('../../assets/img/img_a84@1x.png')},
      {id: 1, grop_url: require('../../assets/img/img_b85@1x.png')},
      {id: 2, grop_url: require('../../assets/img/img_c86@1x.png')},
      {id: 3, grop_url: require('../../assets/img/img_d87@1x.png')}
    ]
  },
  {
    id: 7,
    brokerInfo: {
      name: 'Adidas boy',
      head_url: require('../../assets/img/img_cate197@1x.png')
    },
    openGrop: '118',
    joingrop: '99',
    success_rate: 83,
    Trading_volume: 298,
    social_way: [
      {id: 0, img_url: require('../../assets/chat/bank.svg')},
      {id: 1, img_url: require('../../assets/chat/twitter.svg')},
      {id: 2, img_url: require('../../assets/chat/facebook.svg')},
      {id: 3, img_url: require('../../assets/chat/youtube.svg')},
      {id: 4, img_url: require('../../assets/chat/github.svg')},
      {id: 5, img_url: require('../../assets/chat/reddit.svg')},
      {id: 6, img_url: require('../../assets/chat/wechat.svg')},
      {id: 7, img_url: require('../../assets/chat/discord.svg')},
      {id: 8, img_url: require('../../assets/chat/instagram.svg')}
    ],
    isopen: true,
    gropData: [
      {id: 0, grop_url: require('../../assets/img/img_a84@1x.png')},
      {id: 1, grop_url: require('../../assets/img/img_b85@1x.png')},
      {id: 2, grop_url: require('../../assets/img/img_c86@1x.png')},
      {id: 3, grop_url: require('../../assets/img/img_d87@1x.png')}
    ]
  },
  {
    id: 8,
    brokerInfo: {
      name: 'Adidas boy',
      head_url: require('../../assets/img/img_cate197@1x.png')
    },
    openGrop: '118',
    joingrop: '99',
    success_rate: 83,
    Trading_volume: 298,
    social_way: [
      {id: 0, img_url: require('../../assets/chat/bank.svg')},
      {id: 1, img_url: require('../../assets/chat/twitter.svg')},
      {id: 2, img_url: require('../../assets/chat/facebook.svg')},
      {id: 3, img_url: require('../../assets/chat/youtube.svg')},
      {id: 4, img_url: require('../../assets/chat/github.svg')},
      {id: 5, img_url: require('../../assets/chat/reddit.svg')},
      {id: 6, img_url: require('../../assets/chat/wechat.svg')},
      {id: 7, img_url: require('../../assets/chat/discord.svg')},
      {id: 8, img_url: require('../../assets/chat/instagram.svg')}
    ],
    isopen: true,
    gropData: [
      {id: 0, grop_url: require('../../assets/img/img_a84@1x.png')},
      {id: 1, grop_url: require('../../assets/img/img_b85@1x.png')},
      {id: 2, grop_url: require('../../assets/img/img_c86@1x.png')},
      {id: 3, grop_url: require('../../assets/img/img_d87@1x.png')}
    ]
  },
  {
    id: 9,
    brokerInfo: {
      name: 'Adidas boy',
      head_url: require('../../assets/img/img_cate197@1x.png')
    },
    openGrop: '118',
    joingrop: '99',
    success_rate: 83,
    Trading_volume: 298,
    social_way: [
      {id: 0, img_url: require('../../assets/chat/bank.svg')},
      {id: 1, img_url: require('../../assets/chat/twitter.svg')},
      {id: 2, img_url: require('../../assets/chat/facebook.svg')},
      {id: 3, img_url: require('../../assets/chat/youtube.svg')},
      {id: 4, img_url: require('../../assets/chat/github.svg')},
      {id: 5, img_url: require('../../assets/chat/reddit.svg')},
      {id: 6, img_url: require('../../assets/chat/wechat.svg')},
      {id: 7, img_url: require('../../assets/chat/discord.svg')},
      {id: 8, img_url: require('../../assets/chat/instagram.svg')}
    ],
    isopen: true,
    gropData: [
      {id: 0, grop_url: require('../../assets/img/img_a84@1x.png')},
      {id: 1, grop_url: require('../../assets/img/img_b85@1x.png')},
      {id: 2, grop_url: require('../../assets/img/img_c86@1x.png')},
      {id: 3, grop_url: require('../../assets/img/img_d87@1x.png')}
    ]
  }
]
export default {
  components: {
    BrokerItem
  },
  data () {
    return {
      brokerData: brokerData,
      active: 1,
      activeImg: require('../../assets/icon/arrow-down-b-fill.svg'),
      activeFlag: require('../../assets/icon/arrow-down-s-fill.svg')
    }
  },
  methods: {
    hundleActive: function (type) {
      console.log(type)
      this.active = type
    }
  }
}
</script>
<style lang="less"  scoped>
.brokerbox{
  width: 100%;
  height: auto;
  overflow: hidden;
  .broker{
    width: 94%;
    height: auto;
    /deep/.el-button:focus,.el-button:hover{
        border:0;
        background: #FFD500;
        color: #fff;
      }
    .brokercenter{
       .brokerItem{
         overflow-y:auto;
        }
    }
  }
}
</style>
